<example name="Header">
  <file type="html">
    <div id="header"></div>
    <div class="page-content"></div>
  </file>

  <file type="css">
    /* override common styles */
    :root body {
      margin: 0;
      background: #e8e8e9;
    }

    :global(.page-content) {
      background: #FFF;
      padding: 32px;
      height: 370px;
    }
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';

    import hubLogo from '@jetbrains/logos/hub/hub.svg';
    import dragIcon from '@jetbrains/icons/drag.svg';

    import Auth from '@jetbrains/ring-ui/components/auth/auth';
    import showAuthDialog from '@jetbrains/ring-ui/components/auth-dialog-service/auth-dialog-service';
    import Header, {Tray, TrayIcon, SmartProfile, SmartServices} from '@jetbrains/ring-ui/components/header/header';
    import Link from '@jetbrains/ring-ui/components/link/link';
    import Icon from '@jetbrains/ring-ui/components/icon/icon';
    import Input from '@jetbrains/ring-ui/components/input/input';
    import Button from '@jetbrains/ring-ui/components/button/button';
    import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
    import PopupMenu from '@jetbrains/ring-ui/components/popup-menu/popup-menu';

    import hubConfig from 'ring-ui-docs/components/hub-config';

    const container = document.getElementById('header');
    const auth = new Auth(hubConfig);
    auth.setAuthDialogService(showAuthDialog);
    auth.init();

    const renderHeaderDemo = () => (
      <Header>
        <Link href="/">
          <Icon glyph={hubLogo} size={Icon.Size.Size48} />
        </Link>
        <Link active href="#">Users</Link>
        <Link href="#">Groups</Link>
        <Link href="#">Spaces</Link>
        <Link href="#">Services</Link>
        <Button>Create issue</Button>
        <Tray>
          <Input placeholder="search" />
          <Dropdown
            anchor={({active}) => (
              <TrayIcon
                active={active}
                glyph={dragIcon}
              />
            )}
          >
            <PopupMenu
              closeOnSelect={true}
              data={[
                {label: 'Test'},
                {label: 'Test2'}
              ]}
            />
          </Dropdown>
          <SmartServices auth={auth} />
          <SmartProfile
            auth={auth}
            hasUpdates={true}
          />
        </Tray>
      </Header>
    );

    render(renderHeaderDemo(), container);
  </file>
</example>
